<template>
  <div class="login">
    <div class="login_tittle">
      <div class="img_url">
        <img src="../../assets/images/FrameBlue.png" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #000000;
          border-left: 2px solid #e6e6e6;
          padding: 0 10px;
          margin-left: 10px;
        "
      >
        账号登录
      </div>
    </div>
    <div class="login_content">
      <div class="container">
        <div class="container_info">
          <div class="logo">
            <img src="../../assets/images/logo.png" alt="" />
          </div>
          <div class="from">
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane class="el_tab" label="密码登录" name="first">
                <el-form :model="form" label-width="0px">
                  <el-form-item>
                    <el-input
                      v-model="form.mobile"
                      placeholder="请输入手机号"
                      :prefix-icon="Iphone"
                      style="
                        margin-top: 20px;
                        height: 48px;
                        background: #f5f5f5;
                        border-radius: 8px 8px 8px 8px;
                        opacity: 1;
                      "
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="form.password"
                      placeholder="请输入密码"
                      :prefix-icon="Lock"
                      style="
                        margin-top: 10px;
                        height: 48px;
                        background: #f5f5f5;
                        border-radius: 8px 8px 8px 8px;
                        opacity: 1;
                      "
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      class="denglu"
                      @click="onSubmit(1)"
                      >登录</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-checkbox v-model="form.checked"
                      >我已阅读并同意
                      <a @click.stop="goUserAgreement(1)">《用户协议》</a> 和
                      <a @click.stop="goUserAgreement(2)">《隐私政策》</a>
                    </el-checkbox>
                  </el-form-item>
                </el-form>
                <div class="rigister" @click="goRigister">立即注册</div>
              </el-tab-pane>

              <el-tab-pane label="验证码登录" name="second">
                <el-form :model="form" label-width="0px">
                  <el-form-item>
                    <el-input
                      v-model="form.mobile"
                      placeholder="请输入手机号"
                      :prefix-icon="Iphone"
                      style="
                        margin-top: 20px;
                        height: 48px;
                        background: #f5f5f5;
                        border-radius: 8px 8px 8px 8px;
                        opacity: 1;
                        border: none;
                      "
                    />
                  </el-form-item>
                  <el-form-item style="display: flex; padding-top: 10px">
                    <div
                      style="
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        background-color: #f5f5f5;
                      "
                    >
                      <el-input
                        v-model="form.captcha"
                        placeholder="请输入验证码"
                        :prefix-icon="Lock"
                        style="
                          height: 48px;
                          background: #f5f5f5;
                          border-radius: 8px 8px 8px 8px;
                          opacity: 1;
                          width: 200px;
                        "
                      />
                      <span
                        style="
                          display: inline-block;
                          width: 160px;
                          height: 48px;
                          line-height: 48px;
                          font-size: 16px;
                          font-family: PingFang SC-Medium, PingFang SC;
                          font-weight: 500;
                          color: #2487e8;
                          margin-left: 10px;
                          cursor: pointer;
                          flex: 1;
                          text-align: right;
                          padding-right: 16px;
                        "
                        @click="getCode"
                      >
                        {{ ctxCode }}
                      </span>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      class="denglu"
                      @click="onSubmit(2)"
                      >登录</el-button
                    >
                  </el-form-item>
                  <el-form-item prop="checked">
                    <el-checkbox v-model="form.checked"
                      >我已阅读并同意
                      <a @click.stop="goUserAgreement(1)">《用户协议》</a> 和
                      <a @click.stop="goUserAgreement(2)"
                        >《隐私政策》</a
                      ></el-checkbox
                    >
                  </el-form-item>
                </el-form>
                <div class="rigister" @click="goRigister">立即注册</div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="login_footer">
        <div class="about">
          <div class="pingtai" 
          v-for="(item, index) in fuwuTime" 
          :key="index"
          @click="lookPlatformInfo(item.id)"
          >
            {{ item.titleTime }}
          </div>
        </div>
        <div class="icp">
          <a style="color: #fff;cursor: pointer;" href="https://beian.miit.gov.cn/" target="_blank">易可易 浙ICP备19049974号-2 © 2020 杭州易可易科技有限公司版权所有</a>
          <!-- 易可易 浙ICP备19049974号-2 © 2020 杭州易可易科技有限公司版权所有 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
// import { useCounterStore } from "@/store/modules/login.js";

import { ref, getCurrentInstance } from "vue";
import { Iphone, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
import { Login, SmsSend, CaptchaLogin } from "../../api/login";
import { UserAgreement, PrivacyAgreement } from "../../api/common";
import { setUserInfo } from "@/service";
const router = useRouter();
defineProps({
  msg: String,
});
const activeName = ref("first");
const form = ref({
  checked: false,
  mobile: "",
  password: "",
  captcha: "",
  event: "captcha_login", //验证码登录标识符
});
const fuwuTime = ref([
  { titleTime: "平台规则" ,id:'1'},
  { titleTime: "平台动态 ",id:"2" },
  { titleTime: "关于我们",id:'3' },
  { titleTime: "新手上路 ",id:'4'},
  { titleTime: "意见反馈",id:'5' },
  { titleTime: "服务时间：工作日9：00~18：00" },
  { titleTime: "服务电话：4000582021" },
  { titleTime: "客服邮箱：feedback@ekee.com.cn" },
]);
const phoneNumberRegex = /^1[3456789]\d{9}$/;

// const {proxy }  = getCurrentInstance();
// const counterStore = useCounterStore();
// console.log('counterStore',counterStore)
const onSubmit = (val) => {
  // console.log("代理", proxy.$BASE_API)
  //密码登录
  if (val == 1) {
    if (!form.value.mobile)
      return ElMessage({ message: "请输入手机号", type: "error" });

    if (!form.value.password)
      return ElMessage({ message: "请输入密码", type: "error" });
    if (!form.value.checked)
      return ElMessage({ message: "请勾选协议", type: "error" });
    if (!phoneNumberRegex.test(form.value.mobile))
      return ElMessage({ message: "请输入正确的手机号码", type: "error" });
    Login(form.value)
      .then((res) => {
        console.log("res", res.status);
        if (res.code != 1) {
          ElMessage({ message: res.msg, type: "error" });
        } else {
          ElMessage({ message: res.msg, type: "success" });
          setUserInfo(JSON.stringify(res.data));
          // Cookies.set("loginToken", token);
          // // localStorage.setItem("mobile", this.loginFrom.mobile);
          // // localStorage.setItem("password", this.loginFrom.password);
          // // localStorage.setItem("keypath", "/userInfo");
          router.push({
            path: "/home",
            query: {
              flag: "2",
            },
          });
        }
      })
      .catch((error) => {
        console.log("error", error);
      });
  } else {
    //验证码登录
    if (!form.value.mobile)
      return ElMessage({ message: "请输入手机号", type: "error" });

    if (!form.value.captcha)
      return ElMessage({ message: "请输入验证码", type: "error" });
    if (!form.value.checked)
      return ElMessage({ message: "请勾选协议", type: "error" });
    if (!phoneNumberRegex.test(form.value.mobile))
      return ElMessage({ message: "请输入正确的手机号码", type: "error" });
    CaptchaLogin(form.value)
      .then((res) => {
        if (res.code != 1) {
          ElMessage({ message: res.msg, type: "error" });
        } else {
          ElMessage({ message: res.msg, type: "success" });
          setUserInfo(JSON.stringify(res.data));
          router.push({
            path: "/home",
            query: {
              flag: "2",
            },
          });
        }
      })
      .catch((error) => {
        console.log("error", error);
      });
  }
};
const handleClick = () => {
  //   console.log(tab);
};

//获取验证码
const getCode = () => {
  if (clickBtn.value == false) return;
  if (!form.value.mobile)
    return ElMessage({ message: "请输入手机号", type: "error" });
  if (!phoneNumberRegex.test(form.value.mobile))
    return ElMessage({ message: "请输入正确的手机号码", type: "error" });
  //获取成功之后调用
  SmsSend(form.value)
    .then((res) => {
      if (res.code == 1) {
        runNum();
        ElMessage({ message: res.msg, type: "success" });
      } else {
        ElMessage({ message: res.msg, type: "error" });
      }
    })
    .catch((error) => {});
};
const ctxCode = ref("获取验证码");
const clickBtn = ref(true);
const runNum = () => {
  let num = 60;
  let timer = setInterval(() => {
    num--;
    //重新获取验证码
    if (num < 0) {
      clearInterval(timer);
      clickBtn.value = true;
      ctxCode.value = "重新获取";
    } else {
      ctxCode.value = num + "s重新获取";
      clickBtn.value = false;
    }
  }, 1000);
};
//获取用户协议
const goUserAgreement = (type) => {
  const newpage = router.resolve({
    path: "/agreement", // 跳转的页面路由
    query: {
      // 要传的参数
      type: type,
    },
  });
  window.open(newpage.href, "_blank");

  // router.push({
  //   path: "/agreement",
  //   query: {
  //     type: type,
  //   },
  // });
  // UserAgreement()
  //   .then((res) => {
  //     if (res.code == 1) {
  //       ElMessage({ message: res.msg, type: "success" });
  //       console.log("res", res.data.content);
  //     } else {
  //       ElMessage({ message: res.msg, type: "error" });
  //     }
  //   })
  //   .catch((error) => {});
};

//获取隐私政策
// const getPrivacyAgreement = () => {
//   PrivacyAgreement()
//     .then((res) => {
//       if (res.code == 1) {
//         ElMessage({ message: res.msg, type: "success" });
//         console.log("res", res.data.content);
//       } else {
//         ElMessage({ message: res.msg, type: "error" });
//       }
//     })
//     .catch((error) => {});
// };
//跳转不同页面
const lookPlatformInfo = (id) => {
  switch (id) {
    case "1":
      router.push("/plat-form-rules");
      console.log("1");
      break;
    case "2":
      router.push("/plat-form-dynamics");

      console.log("2");
      break;
    case "3":
      router.push("/about-us");

      console.log("3");
      break;
    case "4":
      router.push("/hit-theroad");

      console.log("4");
      break;
    case "5":
      router.push("/feed-back");

      console.log("5");
      break;
    default:
      console.log("default");
  }
};

//注册
const goRigister = () => {
  router.push("/register");
};

const count = ref(0);
</script>

<style scoped lang="less">
#app {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
:deep(.el-input__wrapper) {
  background-color: #f5f5f5;
  border: none;
  box-shadow: 0 0 0 0px;
}
:deep(.el-input) {
  border: none;
}
.demo-tabs {
  :deep(.el-tabs) {
    height: 50rpx;
  }
}
.login {
  //   border: 1px solid red;
  height: 100%;
  width: 100%;
  color: #000;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  .login_tittle {
    height: 88px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    // border: 1px solid red;
    padding-left: 120px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .img_url {
      width: 108px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .login_footer {
    // border: 1px solid red;
    margin-top: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .about {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      .pingtai {
        box-sizing: border-box;

        align-content: center;
        align-items: center;
        // padding-right: 10px;
        padding: 0px 30px 0px 30px;
        height: 16px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #f5f5f5;
        line-height: 16px;
        border-right: 2px solid #f5f5f5;
        cursor: pointer;
      }
      .pingtai:last-child {
        border-right: none;
      }
    }
    .icp {
      margin-top: 30px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #f5f5f5;
      line-height: 20px;
    }
  }
  .login_content {
    position: fixed;
    top: 88px;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/images/dl.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .container {
      display: flex;
      flex-direction: column;
      width: 1200px;
      .container_info {
        display: flex;

        align-items: center;
        justify-content: space-between;
        margin-top: 156px;
        .logo {
          width: 293px;
          height: 100px;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .from {
          box-sizing: border-box;
          width: 420px;
          height: 412px;
          background: #ffffff;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          padding: 16px;
          .denglu {
            width: 398px;
            height: 52px;
            background: #2487e8;
            box-shadow: 0px 6px 15px 0px rgba(0, 82, 217, 0.24);
            border-radius: 30px 30px 30px 30px;
            opacity: 1;
            margin-top: 26px;
          }
        }

        .demo-tabs {
          :deep(.el-tabs__nav-scroll) {
            display: flex;
            justify-content: space-around;
          }
          :deep(.el-tabs__item) {
            width: 190px;
            height: 50px;
          }
          :deep(.el-tabs) {
            height: 50rpx;
          }
        }

        .rigister {
          display: flex;
          float: right;
          height: 17px;
          font-size: 12px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.87);
          line-height: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
// .read-the-docs {
//   color: #888;
// }
</style>
